<template>
  <div class="shangjia">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="line-height: 36px;">上架管理</span>
      </div>
      <s-table
        :table="table"
        ref="table"
        @http="tableWatch">
        <el-table-column
          fixed="right"
          align="center"
          slot="operation"
          class-name="operationMore"
          label="可用操作"
          width="80">
          <template slot-scope="s">
            <el-button type="info" size="mini" @click="dialogConfirmOpen(s.row)" v-if="USER.auth.indexOf('inOperation_shangjia_confirm')!==-1">上架</el-button>
          </template>
        </el-table-column>
        <el-form-item label="ASN编号" prop="asnbh">
          <el-input type="text"
                    class="input"
                    v-model="autoVue_table_asnbh"
                    placeholder="ASN编号" spellcheck="false" auto-capitalize="off" auto-complete="off"
                    auto-correct="off"></el-input>
        </el-form-item>
        <el-form-item label="创建时间" prop="cjsj">
          <el-date-picker
            v-model="autoVue_table_cjsj"
            type="daterange"
            placeholder="选择日期范围">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="PO编号" prop="dycgdbh">
          <el-input type="text"
                    class="input"
                    v-model="autoVue_table_dycgdbh"
                    placeholder="关联PO编号" spellcheck="false" auto-capitalize="off" auto-complete="off"
                    auto-correct="off"></el-input>
        </el-form-item>
        <!--<el-form-item label="供应商" prop="gysid">-->
          <!--<el-input type="text"-->
                    <!--class="input"-->
                    <!--v-model="autoVue_table_gysid"-->
                    <!--placeholder="供应商名称" spellcheck="false" auto-capitalize="off" auto-complete="off"-->
                    <!--auto-correct="off"></el-input>-->
        <!--</el-form-item>-->
        <el-form-item label="收货时间" prop="shsj">
          <el-date-picker
            v-model="autoVue_table_shsj"
            type="daterange"
            placeholder="选择日期范围">
          </el-date-picker>
        </el-form-item>
      </s-table>
    </el-card>
    <s-dialog :dialog="dialogConfirm" :close="dialogConfirmInit">
      <p slot="title">上架 <span>ASN编号: {{dialogConfirm.row.asnbh}}</span></p>
      <s-table
        :table="tableConfirm"
        ref="tableConfirm"
        @http="tableWatch">
        <el-table-column
          fixed="right"
          align="center"
          slot="operation"
          class-name="operationMore"
          label="操作"
          width="80">
          <template slot-scope="s">
            <el-button type="info" size="mini" @click="dialogAdjustmentOpen(s.row, s.$index)" v-if="s.row.sl != s.row.sjsl">调整</el-button>
            <div v-else>
              <el-button type="danger" icon="delete" size="mini" @click="tableConfirmDelete(s.$index, s.row)" v-if="typeof s.row.lock !== 'undefined'"></el-button>
              <el-button type="success" size="mini" @click="dialogAdjustmentOpen(s.row, s.$index)" icon="edit" v-else></el-button>
            </div>
          </template>
        </el-table-column>
        <el-form-item slot="multiSelect" label="多选操作" prop="multiSelect" v-if="tableConfirm.multiSelect">
          <el-row>
            <el-col :span="8">
              <el-button size="small" type="info" @click="dialogOperationOpen('tableConfirm')">操作人员</el-button>
            </el-col>
          </el-row>
        </el-form-item>
      </s-table>
      <el-button slot="footer" type="info" @click="dialogConfirmSave">确认上架</el-button>
    </s-dialog>
    <s-dialog :dialog="dialogAdjustment" :close="dialogAdjustmentInit">
      <p slot="title">调整</p>
      <s-form :form="formDialogAdjustment" ref="formDialogAdjustment">
        <el-row>
          <el-col :xs="24" :lg="{span: 7, offset: 0}" class="">
            <el-form-item label="托盘码">
              <el-input
                type="text"
                disabled
                v-model="dialogAdjustment.row.lpn"
                placeholder="托盘码"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 7, offset: 1}" class="">
            <el-form-item label="货品编号">
              <el-input
                type="text"
                disabled
                v-model="dialogAdjustment.row.show_bh"
                placeholder="货品编号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 7, offset: 1}" class="">
            <el-form-item label="货品名称">
              <el-input
                type="text"
                disabled
                v-model="dialogAdjustment.row.show_mc"
                placeholder="货品名称"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :lg="{span: 7, offset: 0}" class="">
            <el-form-item label="收货数量">
              <el-input
                type="text"
                disabled
                v-model="dialogAdjustment.row.sl"
                placeholder="上架数量"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 7, offset: 1}" class="">
            <el-form-item label="生产日期">
              <el-input
                type="text"
                disabled
                v-model="dialogAdjustment.row.show_scrq"
                placeholder="生产日期"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 7, offset: 1}" class="">
            <el-form-item label="批次号">
              <el-input
                type="text"
                disabled
                v-model="dialogAdjustment.row.show_hppc"
                placeholder="批次号"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :lg="{span: 7, offset: 0}" class="">
            <el-form-item prop="kwid" label="上架库位">
              <el-select v-model="formDialogAdjustment.kwid"
                         filterable
                         remote
                         placeholder="请选择上架库位"
                         @change="dialogChangeKwmc"
                         :remote-method="dialogRemoteKwmc">
                <el-option
                  v-for="item in dialogConfirm.kwid"
                  :key="item.dictionaryid"
                  :label="item.value"
                  :value="item.dictionaryid">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 7, offset: 1}" class="">
            <el-form-item prop="sjsl" label="上架数量">
              <el-input-number
                v-model="formDialogAdjustment.sjsl"
                :min="1"
                :max="parseInt(dialogAdjustment.row.sl)"
                placeholder="上架数量"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 7, offset: 1}" class="">
            <el-form-item prop="czr" label="操作人员">
              <el-input
                type="text"
                v-model="formDialogAdjustment.czr"
                placeholder="操作人员"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </s-form>
      <el-button slot="footer" type="success" @click="dialogAdjustmentSave" v-if="dialogAdjustment.row.sl != formDialogAdjustment.sjsl">分配</el-button>
      <el-button slot="footer" type="info" @click="dialogAdjustmentSave" v-else>确认</el-button>
    </s-dialog>
    <s-dialog :dialog="dialogOperation" :close="dialogOperationInit">
      <p slot="title">生成操作人员</p>
      <s-form :form="formDialogOperation" ref="formDialogOperation">
        <el-row>
          <el-col :xs="24" :lg="{span: 23, offset: 0}">
            <el-form-item prop="mc" label="操作人员">
              <el-input
                type="text"
                v-model="formDialogOperation.mc"
                placeholder="操作人员"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </s-form>
      <el-button slot="footer" @click="dialogOperationSave">保存</el-button>
    </s-dialog>
  </div>
</template>

<script>
  import {AutoVue, AutoPromise} from '~/plugins/Tools';

  function __formAdjustment () {
    return {
      kwid: { value: '', rule: [ 'vNull__change' ], cRemarks: '' },
      sjsl: { value: 1, rule: ['vNull', 'vNumber'], cRemarks: '' },
      czr: { value: '', rule: ['vNull'], cRemarks: '' },
    };
  }
  function __formDialogOperation () {
    return {
      mc: { value: '', rule: [ 'vNull' ] },
    };
  }
  export default AutoVue({
    name: 'inOperation_shangjia-FEcarWms',
    head: {
      'title': '上架管理',
      'meta': [
        { 'hid': 'description', 'name': 'description', 'content': '乐速科技平台 上架 查看上架信息' },
      ],
    },
    data: {
      table: {
        column: [
          { label: '仓库',
            prop: 'ckmc',
            minWidth: '0px',
            cRemarks: '',
            search: false },
          { label: '货主',
            prop: 'hzmc',
            minWidth: '0px',
            cRemarks: '',
            search: false },
          { label: 'ASN编号',
            prop: 'asnbh',
            minWidth: '0px',
            cRemarks: '',
            search: true },
          { label: 'ASN类型',
            prop: 'show_asnlx',
            minWidth: '0px',
            cRemarks: '',
            search: false },
          { label: 'ASN状态',
            prop: 'show_asnzt',
            minWidth: '0px',
            cRemarks: '0创建 1部分收货 2完全收货 3订单取消 4ASN完成',
            search: true },
          { label: '规格',
            prop: 'gg',
            minWidth: '0px',
            cRemarks: '',
            search: false },
          { label: '优先级',
            prop: 'show_yxj',
            minWidth: '0px',
            cRemarks: '',
            search: false },
          { label: '预计到货—开始',
            prop: 'yjdhsjks',
            minWidth: '0px',
            formatter: (row, column) => {
              return this.a.methods.formatterTime(row[column.property || column], 3);
            },
            cRemarks: '',
            search: false },
          { label: '预计到货—结束',
            prop: 'yjdhsjjs',
            minWidth: '0px',
            formatter: (row, column) => {
              return this.a.methods.formatterTime(row[column.property || column], 3);
            },
            cRemarks: '',
            search: false },
          { label: '创建时间',
            prop: 'cjsj',
            minWidth: '0px',
            formatter: (row, column) => {
              return this.a.methods.formatterTime(row[column.property || column], 3);
            },
            cRemarks: '',
            type: 'DateRange',
            search: true },
          { label: '审核状态',
            prop: 'show_show_shzt',
            minWidth: '0px',
            cRemarks: '0未审核 1已审核',
            search: false },
          { label: '关联PO编号',
            prop: 'dycgdbh',
            minWidth: '0px',
            cRemarks: '',
            search: true },
          { label: '制单人',
            prop: 'zdr',
            minWidth: '0px',
            cRemarks: '',
            search: false },
          { label: '审核人',
            prop: 'ddshr',
            minWidth: '0px',
            cRemarks: '',
            search: false },
          { label: '码盘状态',
            prop: 'show_show_mpzt',
            minWidth: '0px',
            cRemarks: '0.未码盘 1.码盘',
            search: false },
          { label: '收货时间',
            prop: 'shsj',
            minWidth: '0px',
            formatter: (row, column) => {
              return this.a.methods.formatterTime(row[column.property || column], 3);
            },
            cRemarks: '',
            type: 'DateRange',
            search: true },
          /*
          { label: '供应商',
            prop: 'show_gysid',
            minWidth: '0px',
            cRemarks: '',
            search: true },
            */
          { label: '货品编号',
            prop: 'show_bh',
            minWidth: '0px',
            cRemarks: '',
            search: false },
          { label: '货品名称',
            prop: 'show_mc',
            minWidth: '0px',
            cRemarks: '',
            search: false },
          { label: '上架库位',
            prop: 'show_kwid',
            minWidth: '0px',
            cRemarks: '',
            search: false },
          { label: '批次号',
            prop: 'show_hppc',
            minWidth: '0px',
            cRemarks: '',
            search: false },
          { label: '生产日期',
            prop: 'show_scrq',
            minWidth: '0px',
            cRemarks: '',
            search: false },
          { label: '质检状态',
            prop: 'show_zjzt',
            minWidth: '0px',
            cRemarks: '',
            search: false },
          { label: '数量',
            prop: 'sl',
            minWidth: '0px',
            cRemarks: '',
            search: false },
          { label: '操作人',
            prop: 'czr',
            minWidth: '0px',
            cRemarks: '',
            search: false },
        ],
        url: '/wmsshelves/list',
        key: 'yqdhbdid',
        tableColumn: 6,
        muti: false,
      },

      dialogConfirm: {
        kwid: [],
        czr: [],
        row: {},
        size: 'full',
      },
      tableConfirm: {
        column: [
          { label: '托盘码',
            prop: 'lpn',
            minWidth: '0px',
            cRemarks: '',
            search: true },
          { label: '货品编号',
            prop: 'show_bh',
            minWidth: '0px',
            cRemarks: '',
            search: true },
          { label: '货品名称',
            prop: 'show_mc',
            minWidth: '0px',
            cRemarks: '',
            search: true },
          { label: '批次号',
            prop: 'show_hppc',
            minWidth: '110px',
            cRemarks: '',
            search: true },
          { label: '生产日期',
            prop: 'show_scrq',
            formatter: (row, column) => {
              return this.a.methods.formatterTime(row[column.property || column], 3);
            },
            minWidth: '120px',
            cRemarks: '',
            search: true },
          { label: '上架库位',
            prop: 'show_kwid',
            minWidth: '0px',
            cRemarks: '',
            search: true },
          { label: '收货数量',
            prop: 'sl',
            minWidth: '0px',
            cRemarks: '',
            search: true },
          { label: '上架数量',
            prop: 'sjsl',
            minWidth: '0px',
            cRemarks: '',
            search: true },
          { label: '操作人',
            prop: 'czr',
            minWidth: '0px',
            cRemarks: '',
            search: true },
          { label: '规格',
            prop: 'gg',
            minWidth: '0px',
            cRemarks: '',
            search: false },
        ],
        url: '/wmsshelves/baseSelectDetail',
        tableColumn: 10,
      },

      dialogAdjustment: {
        row: {},
        index: -1,
      },
      formDialogAdjustment: __formAdjustment(),

      dialogOperation: {
        table: '',
        tableConfirm: {
          mc: '',
        },
      },
      formDialogOperation: __formDialogOperation(),
    },
    store: ['USER'],
    transition: 'slide-fade',
    methods: {
      dialogConfirmInit () {
        this.dialogConfirm.row = {};
        this.tableClear('tableConfirm');
      },
      dialogConfirmOpen (row) {
        this.dialogConfirm.row = row;
        this.tableConfirm.url = '/wmsshelves/baseSelectDetail/' + this.dialogConfirm.row.yqdhbdid;
        this.tableWatch('tableConfirm');
        this.dialogConfirm.visible = true;
      },
      tableConfirmDelete (index, row) {
        this.$confirm('您将删除该条明细。', '确认删除？', {
          confirmButtonText: '是',
          cancelButtonText: '否',
          type: 'warning',
        })
          .then(() => {
            let table = this.tableConfirm.data[row.lock];
            table.sl = parseInt(table.sl) + parseInt(row.sl);
            this.tableConfirm.data.splice(index, 1);
          });
      },
      dialogConfirmSave () {
        let success = true;
        let result = '';
        this.tableConfirm.data.forEach((item, index) => {
          if (success && !(item.czr && item.kwid && (parseInt(item.sl) === parseInt(item.sjsl)))) {
            success = false;
            result = `请仔细核对 第 ${(index + 1)} 条数据。 货品编号为 ： ${item.show_bh}`;
          }
        });
        if (success) {
          this.$confirm('您将确认上架。', '确认数据准确？', {
            confirmButtonText: '是',
            cancelButtonText: '否',
            type: 'warning',
          })
            .then(async _ => {
              let data = this.tableConfirm.data;
              let step = [];
              data.forEach(item => {
                let option = Object.assign({}, item);
                delete option.show_mc;
                delete option.show_mxzjzt;
                delete option.sl;
                delete option.show_scrq;
                delete option.mxzjzt;
                delete option.lock;
                try {
                  option.scrq = (new Date(option.scrq)).getTime();
                } catch (err) {
                  console.error('确认收货 中存在 数据异常的 scrq 不是标准的 时间格式！');
                }
                for (let index in option) {
                  if (option.hasOwnProperty(index)) {
                    if (!option[index]) {
                      delete option[index];
                    }
                  }
                }
                step.push(option);
              });
              try {
                await this.post('/wmsshelves/add', step);
                this.dialogConfirmInit();
                this.tableWatch('table');
                this.dialogConfirm.visible = false;
              } catch (err) {
                console.log(err);
              }
            })
            .catch(_ => {
            });
        } else {
          return this.$alert(result, '提示！');
        }
      },

      dialogAdjustmentInit () {
        this.dialogAdjustment.row = {};
        this.dialogAdjustment.index = -1;
        this.formDialogAdjustment = {
          ...this.formDialogAdjustment,
          ...this.ObjectClone(__formAdjustment()),
        };
        this.resetFields('formDialogAdjustment');
      },
      async dialogAdjustmentOpen (row, index) {
        row.show_scrq = this.formatterTime(row.show_scrq, 3);
        this.dialogAdjustment.row = row;
        this.dialogAdjustment.index = index;
        await AutoPromise([
          async () => {
            await this.dialogRemoteKwmc(row.show_kwid);
          },
        ]);
        this.formDialogAdjustment = {
          ...this.formDialogAdjustment,
          ...this.ObjectClone(__formAdjustment(), row),
        };
        this.formDialogAdjustment.sjsl = parseInt(this.formDialogAdjustment.sjsl || row.sl);
        this.dialogAdjustment.visible = true;
      },
      dialogAdjustmentSave () {
        this.VALIDATE('formDialogAdjustment', async option => {
          let sl = parseInt(this.dialogAdjustment.row.sl);
          if (sl !== parseInt(option.sjsl)) {
            let row = Object.assign({}, this.dialogAdjustment.row);
            row.sl = option.sjsl;
            this.tableConfirm.data.push({
              ...row,
              ...option,
              show_kwid: this.dialogOperation.tableConfirm.mc,
              lock: this.dialogAdjustment.index,
            });
            this.dialogAdjustment.row.sl = sl - parseInt(option.sjsl);
            this.tableConfirm.total++;
          } else {
            for (let index in option) {
              if (option.hasOwnProperty(index)) {
                this.dialogAdjustment.row[index] = option[index];
              }
            }
            if (this.dialogOperation.tableConfirm.mc !== '') {
              this.dialogAdjustment.row.show_kwid = this.dialogOperation.tableConfirm.mc;
            }
            /*
            if (this.dialogOperation.tableConfirm.mc === '') {
              this.dialogOperation.tableConfirm.mc = this.dialogAdjustment.row.show_kwid;
            } else {
              this.dialogAdjustment.row.show_kwid = this.dialogOperation.tableConfirm.mc;
            }
            */
            this.dialogAdjustment.visible = false;
          }
        });
      },

      dialogOperationInit () {
        this.dialogOperation.table = '';
        this.dialogOperation.tableConfirm = {
          mc: '',
        };
        this.formDialogOperation = {
          ...this.formDialogOperation,
          ...this.ObjectClone(__formDialogOperation()),
        };
        this.resetFields('formDialogOperation');
      },
      dialogOperationOpen (table) {
        this.dialogOperation.visible = true;
        this.dialogOperation.table = table;
      },
      dialogOperationSave () {
        let tableRef = this.dialogOperation.table;
        this.VALIDATE('formDialogOperation', option => {
          if (this[tableRef].multipleSelection.length < 1) {
            return this.$alert('您还未选择，请您至少选择一个！', '提示');
          }
          this[tableRef].multipleSelection.forEach(item => {
            item.czr = option.mc;
          });
          this.dialogOperationInit();
          this.dialogOperation.visible = false;
        });
      },

      async dialogRemoteKwmc (query = '') {
        this.dialogConfirm.kwid = await this.post('/wmsshelves/searchKw/', {show_kwid: query});
      },
      async dialogChangeKwmc (id) {
        this.dialogConfirm.kwid.forEach(item => {
          if (item.dictionaryid === id) {
            this.dialogOperation.tableConfirm.mc = item.value;
          }
        });
      },
    },
    mounted: function () {
      this.tableWatch('table');
      console.log(this);
    },
  });
</script>
<style scoped lang="scss">
  .box-card {
    margin: 20px;
  }

  .createTimeSpan {
    display: block;
    margin-top: 34px;
  }

  @media screen and (max-width: 800px) {
    .createTimeSpan {
      margin-top: 0;
    }
    .box-card {
      margin: 0;
    }
  }

  .el-select {
    width: 100%;
  }
</style>

<style lang="scss">
</style>
